import { useState, useEffect } from 'react'
import { TabBar } from 'antd-mobile'
import { useNavigate, Outlet, useLocation } from 'react-router-dom'
import NavBer from '../../components/NavBer'

import './home.css'

import {
    AppOutline,
    UnorderedListOutline,
    UserOutline,
    SearchOutline,
    BillOutline,
} from 'antd-mobile-icons'



function Home() {
    const navigate = useNavigate()
    const localtion = useLocation()

    // 导航
    const tabs = [
        {
            key: '/home/index',
            title: '首页',
            icon: <AppOutline />,
        },
        {
            key: '/home/server',
            title: '服务',
            icon: <UnorderedListOutline />,
        },
        {
            key: '/home/find',
            title: '发现',
            icon: <SearchOutline />,
        },
        {
            key: '/home/shop/list',
            title: '商城',
            icon: <BillOutline />,
        },
        {
            key: '/home/mind',
            title: '我的',
            icon: <UserOutline />,
        },
    ]

    // 当前路径
    const [pathname, setPathName] = useState(location.pathname);

    // 监听路由变化
    useEffect(() => {
        setPathName(localtion.pathname)
    }, [localtion.pathname])

    // 切换路由处理函数
    const setRouteActive = (value) => {
        setPathName(value)
        navigate(value)
    }


    return (
        <div id='app'>
            {/* 主体 */}
            <div className="body">
                {/* 路由出口 */}
                <Outlet />
            </div>

            {/* 底部导航 */}
            <div className="bottom">
                <TabBar activeKey={pathname} onChange={value => setRouteActive(value)} >
                    {tabs.map(item => (
                        <TabBar.Item
                            onClick={() => { () => { navigate(item.key) } }}
                            key={item.key}
                            icon={item.icon}
                            title={item.title} />
                    ))}
                </TabBar>
            </div>


        </div>
    );
}

export default Home;